<!-- start: Content -->
<style>
    .pagination-nick button{
        padding:5px;
        margin:5px;
    }
    .pagination-nick .active-nick{
        color:#98D21F;
    }
    .pagination-nick input{
        width:50px;
        text-align:center;
    }
</style>
<div id="content">
    <div class="panel box-shadow-none content-header">
        <div class="panel-body">
            <div class="col-md-12">
                <h3 class="animated fadeInLeft">查询</h3>
                <p class="animated fadeInDown">
                    病虫害 <span class="fa-angle-right fa"></span> 查询
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-12 panel">
            <div class="col-md-12 panel-heading">
                <h4>查询</h4>
            </div>
            <div class="col-md-12 panel-body" style="padding-bottom:30px;">
                <div class="col-md-12">
                    <form class="cmxform" id="signupForm" method="get" action="">
                        <div class="col-md-6">
                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:0px !important;">
                                <select class="form-text" id="sel_crop_type" onchange="cropTypeOnchange(this.options[this.options.selectedIndex].value)">
                                    <option value="0" selected="selected">请选择作物分类</option>
                                    <th:block th:each="item:${cropTypeList}">
                                        <option th:value="${item.id}" th:text="${item.name}"></option>
                                    </th:block>
                                </select>
                                <span class="bar"></span>
                                <!--<label>专家类别</label>-->
                            </div>

                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:0px !important;">
                                <select class="form-text" id="sel_disease_type" onchange="disease_type_onchange2(this.options[this.options.selectedIndex].value)">
                                    <option value="0" selected="selected" name="sel_kong">请选择病害类别</option>
                                    <th:block th:each="item:${diseaseTypes}">
                                        <option th:value="${item.id}" th:text="${item.typeName}" name="sel_no_kong"></option>
                                    </th:block>
                                </select>
                                <span class="bar"></span>
                                <!--<label>专家类别</label>-->
                            </div>

                        </div>

                        <div class="col-md-6">

                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:0px !important;">
                                <select class="form-text" id="sel_crop" onchange="crop_onchange(this.options[this.options.selectedIndex].value)">
                                    <option value="0" selected="selected">请选择作物名称</option>

                                </select>
                                <span class="bar"></span>
                                <!--<label>专家类别</label>-->
                            </div>


                            <!--<div class="form-group form-animate-text" style="margin-bottom:0;margin-top:20px !important;" id="bhmc_chk">-->
                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:0px !important;">
                                <select class="form-text" id="sel_disease_name">
                                    <option value="0" selected="selected">请选择病害名称</option>
                                </select>
                                <span class="bar"></span>
                                <!--<label>专家类别</label>-->
                                <!--<input class="form-text" type="checkbox" value="1">病害1<input class="form-text" type="checkbox" value="1">病害2-->
                            </div>
                        </div>
                        <div class="col-md-12" style="margin-top: 10px">
                            <input class="submit btn btn-danger" type="button" onclick="pestSearch2();" value="查询">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="panel">
            <div class="panel-body" style="padding-bottom: 50px;">
                <div class="pagination-nick"></div>

                <!--<th:block th:each="item:${knowledgeWithBLOBs}">-->
                <!--<div class="well">-->
                    <!--<h4 th:text="${item.kName}"></h4>-->
                    <!--<p th:text="${item.synopsis}"></p>-->
                    <!--<div style="float: right;">-->
                        <!--<span class="fa fa-retweet"></span> <a th:href="@{'/u/details/'+${item.id}}" target="_blank">查看详情</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--</th:block>-->

            </div>
        </div>
    </div>


</div>
<script type="text/javascript" th:inline="javascript">
    //        定义一个分页方法，可多次调用
    function paginationNick(opt){
//            参数设置
        var pager={
            paginationBox:'',//分页容器-- 必填
            mainBox:'',//内容盒子--必填
            numBtnBox:'',//数字按钮盒子-- 必填
            btnBox:'',//按钮盒子 --必填
            ipt:'',//input class-- 必填
            goBtn:'',//go btn class --必填
            currentBtn:'',//当前按钮class name --必填
            pageCount:5,//每页显示几条数据
            numBtnCount:3,//当前页左右两边各多少个数字按钮
            currentPage:0,//当前页码data-page，首屏默认值
            maxCount:0,//ajax请求数据分成的最大页码
            data:[]//ajax请求的数据
        };
        pager = $.extend(pager,opt);
        //请求数据页面跳转方法
        function goPage(btn){
            //obj为ajax请求数据
            // var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
            var obj={other:{},value:[[${knowledgeWithBLOBs}]]};
            //将展示的数据赋值给pager.data  (array)
            pager.data=obj.value;
            //设置ajax请求数据分成的最大页码
            pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
                pager.data.length / pager.pageCount;

//                设置当前页码
            if(!isNaN(btn)){//数字按钮
                pager.currentPage=parseInt(btn);
            }else{
                switch(btn){
                    case 'first':
                        pager.currentPage=0;
                        break;
                    case 'prev':
                        if(pager.currentPage>0){
                            --pager.currentPage;
                        }
                        break;
                    case 'next':
                        if(pager.currentPage+1<pager.maxCount){
                            ++pager.currentPage;
                        }
                        break;
                    case 'last':
                        pager.currentPage=pager.maxCount-1;
                        break;
                }
            }
            //创建数字按钮
            createNumBtn(pager.currentPage);
            //赋值给页码跳转输入框的value，表示当前页码
            $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
//              内容区填充数据
            var arr=[],str='';
            arr=pager.data.slice(pager.pageCount*pager.currentPage,
                pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
                    pager.pageCount*(pager.currentPage+1) : pager.data.length);
            arr.forEach(function(v){
                //str+='<div>'+v.kName+'</div>';
                str+='<div class="well">';
                str+='<h4>'+v.kName+'</h4>';
                str+='<p>'+v.synopsis+'</p>';
                str+='<div style="float: right;">';
                str+='<span class="fa fa-retweet"></span> ';
                str+='<a href="/pestdiagnosis/u/details/'+v.id+'" target="_blank">查看详情</a>';
                str+='</div>';
                str+='</div>';
            });
            $('.'+pager.mainBox).html(str);
        }
        //创建非数字按钮和数据内容区
        function createOtherBtn(){
            $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'" style="position: absolute;bottom: 30px;left:32%;"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一页</button><input style="width:50px;text-align:center;" type="text" placeholder="请输入页码" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class="'+pager.mainBox+'"></div>');
            //ipt value变化并赋值给go btn data-page
            $('.'+pager.btnBox+' .'+pager.ipt).change(function(){
                if(!isNaN($(this).val())){//是数字
                    if($(this).val() > pager.maxCount){//限制value最大值，跳转尾页
                        $(this).val(pager.maxCount);
                    }
                    if($(this).val()<1){//限制value最小值，跳转首页
                        $(this).val(1);
                    }
                }else{//非数字清空value
                    $(this).val('');
                }
                $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
            });
            //每个btn绑定请求数据页面跳转方法
            $('.'+pager.btnBox+' button').each(function(i,v){
                $(this).click(function(){
                    //有值且不是上一次的页码时才调用
                    if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
                        goPage(v.getAttribute('data-page'));
                    }
                });
            });
        }
        //创建数字按钮
        function createNumBtn(page){
            //page是页面index从0开始，这里的page加减一要注意
            var str='';
            if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
                //此页左边右边各pager.numBtnCount个数字按钮
                if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页 page页码从0开始
                    for(var m=pager.numBtnCount;m>0;m--){
                        str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
                    }
                }else{
                    for(var k=0;k<page;k++){
                        str+='<button data-page="'+k+'">'+(k+1)+'</button>';
                    }
                }
                str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始
                    for(var j=1;j<pager.numBtnCount+1;j++){
                        str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
                    }
                }else{
                    for(var i=page+1;i<pager.maxCount;i++){
                        str+='<button data-page="'+i+'">'+(i+1)+'</button>';
                    }
                }
                /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
                 这个分支，可以省略*/
                if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
                    str='';
                    if(page<pager.numBtnCount){//此页左边页码少于固定按钮数时
                        for(var n=0;n<page;n++){//此页左边
                            str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                        }
                        str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                        for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
                            str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                        }
                    }
                    if(pager.maxCount-page-1<pager.numBtnCount){
                        for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
                            str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
                        }
                        str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                        for(var z=page+1;z<pager.maxCount;z++){//此页右边
                            str+='<button data-page="'+z+'">'+(z+1)+'</button>';
                        }
                    }
                }
            }else{
                str='';
                for(var n=0;n<page;n++){//此页左边
                    str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                }
                str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                for(var x=1;x<pager.maxCount-page;x++){//此页右边
                    str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                }
            }

            $('.'+pager.numBtnBox).html(str);

            //每个btn绑定请求数据页面跳转方法
            $('.'+pager.numBtnBox+' button').each(function(i,v){
                $(this).click(function(){
                    goPage(v.getAttribute('data-page'));
                });
            });

            //按钮禁用
            $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
            if(!page){//首页时
                $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
                $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
            }
            if(page==pager.maxCount-1){//尾页时
                $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
                $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
            }
        }

        //首屏加载
        createOtherBtn();//首屏加载一次非数字按钮即可
        goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
    }
    //调用
    paginationNick({
        paginationBox:'pagination-nick',//分页容器--必填
        mainBox:'main-box-nick',//内容盒子--必填
        numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
        btnBox:'btn-box-nick',//按钮盒子 --必填
        ipt:'page-ipt-nick',//input class-- 必填
        goBtn:'go-btn-nick',//go btn class --必填
        currentBtn:'active-nick'//当前按钮class name --必填
    });
</script>